<template>
  <div id="main-body">
    <div id="nav-art">
      <div class="nav-item">
        <router-link to="/artList">
          <Icon type="ios-list-box-outline" class="nav-icon"/>
          <p>所有文章</p>
        </router-link>
      </div>
      <div class="nav-item">
        <router-link to="/draftList">
          <Icon type="ios-folder-outline" class="nav-icon"/>
          <p>草稿箱</p>
        </router-link>
      </div>
      <div class="nav-item">
        <router-link to="/backList">
          <Icon type="ios-trash-outline" class="nav-icon"/>
          <p>回收站</p>
        </router-link>
      </div>
      <div class="nav-item">
        <router-link to="/addList">
          <Icon type="ios-add-circle-outline" class="nav-icon"/>
          <p>添加文章</p>
        </router-link>
      </div>
    </div>
    <div id="frame">
      <router-view/>
    </div>
  </div>
</template>
<script>
export default {
  name: "Main-body"
};
</script>
<style scoped>
#main-body {
  height: 100%;
  display: flex;
  flex-direction: row;
}
#nav-art {
  display: flex;
  flex-direction: column;
  width: 80px;
  justify-content: center;
}
.nav-item {
  text-align: center;
  padding: 30px 10px;
}
.nav-item > a {
  display: block;
  color: #515a6e;
  font-size: 10px;
}
.nav-icon {
  font-size: 30px;
  color: #515a6e;
}
#frame {
  flex: 1;
}
</style>


